<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            height:100px;
            background-color: red;
            /* 行高等于高度,一行文字垂直居中 */
            /* line-height:100px; */
            /* 1个字体的高度  1*16=16*/
            /* line-height:2; */
            /* 1个字体的高度  100%*16=16 */
            /* line-height:100%; */
            /* 范围在1-1.2 */
            /* line-height:normal; */
            /* 1个字体的高度  1*16=16*/
            /* line-height:1em; */
        /* }  */
        /* body{
            /*1. 父级元素 字体大小为0 */
            /* font-size:0;
        }  */
        div{
            height:100px;
            width:100px;
            background-color: blue;
            display: inline-block;
            font-size:16px;
        }
        .two{
            height:200px;
            /* 了解 */
            /* 情况1：两个盒子顶线对齐 */
            vertical-align:top;
        }
    </style>
</head>
<body>
   <!-- <div>
    111
   </div> -->
   <!-- 2.取消回车 -->
   <!-- 3.浮动 -->
   <div>1111</div>
   <div class="two"></div>
</body>
</html>